<template>
    <div class="warpper-box">
        <a-form-model layout="inline">
            <a-form-model-item label="选择月份范围">
                <a-range-picker
                :placeholder="['开始月份', '结束月份']"
                :format="dateFormatList"
                :value="value"
                :mode="mode2"
                @panelChange="handleChange"/>
            </a-form-model-item>
            <a-button type="primary" @click="loadTable">
                查询
            </a-button>
            <a-button style="margin-left: 10px;" @click="reset">
                重置
            </a-button>
        </a-form-model>
        <div id="energyLine" style="height: 300px;width: 100%;margin-top: 30px;"></div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from "moment"
import {
    parkChartOptions,
    parkLineChartOptions,
} from './modules/form'
import {getAllUserStatistics} from '@/api/manage/statistics'
export default {
  name: 'UserStatistics',
  data () {
    return {
        beginTime:'',
        endTime:'',
        value:[],
        dateFormatList: ['YYYY-MM', 'YYYY-MM'],
        mode2: ['month', 'month'],
        xAxis:['线上总人数','线下总人数','人数合计','线上总笔数','线下总笔数','笔数合计','线上总金额','线下总金额','总金额合计'],
    }
  },
  created () {
     this.loadTable();
  },
  methods: {
    async loadTable(){
        let params = {};
        params.beginTime = this.beginTime;
        params.endTime = this.endTime;
        const {code,data} = await getAllUserStatistics(params);
        if(code ==='1'){
            this.initBar(data);
        }
    },
    reset(){
        this.beginTime = '';
        this.endTime = '';
        this.value = [];
        this.loadTable();
    },
    handleChange(value, mode) {
        this.value = value;
        this.beginTime = moment(value[0]).format('YYYY-MM');
        this.endTime = moment(value[1]).format('YYYY-MM');
        this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
    },
    initBar(data){
        let myChart = echarts.init(document.getElementById('energyLine'))
        myChart.setOption(parkChartOptions,true);
        let josn = [
            {"name":"线上总人数","value":data.onlineHeadCount,yAxisIndex:1},
            {"name":"线下总人数","value":data.offlineHeadCount,yAxisIndex:1},
            {"name":"人数合计","value":data.headCount,yAxisIndex:1},
            {"name":"线上总笔数","value":data.onlineStrokeCount,yAxisIndex:3},
            {"name":"线下总笔数","value":data.offlineStrokeCount,yAxisIndex:3},
            {"name":"笔数合计","value":data.strokeCount,yAxisIndex:3},
             {"name":"线上总金额","value":data.onlineSettleAmount,yAxisIndex:4},
            {"name":"线下总金额","value":data.offlineSettleAmount,yAxisIndex:4},
            {"name":"总金额合计","value":data.settleAmount,yAxisIndex:4}
        ]

        myChart.setOption({
            xAxis:{
                data:this.xAxis
            },
            series:[{
                data:josn
            }]
        })
        window.addEventListener("resize",function() {
            myChart.resize()
        })
    }
  }
}
</script>